


import React, { useEffect, useState } from "react";

import img3 from "../cll/imgs/1.png"
import "./post.css";
import { useNavigate } from "react-router-dom"
import axios from "axios";
import { Card, Button, InfiniteScroll, DotLoading, NavBar } from 'antd-mobile';
import moment from 'moment';

const api = "http://localhost:3000"
const InfiniteScrollContent = ({ hasMore }) => {
    return (
        <>
            {hasMore ? (
                <>
                    <span>Loading</span>
                    <DotLoading />
                </>
            ) : (
                <span>--- 我是有底线的 ---</span>
            )}
        </>
    )
}
function Postbox() {

    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    // 获取职业
    const [list, setlist] = useState([])

    const getlist = () => {
        axios.get(`${api}/career`)
            .then(res => {
                setlist(res.data.data)
            })
    }

    // 跳转到投递详情
    const posts = (id,item) => {
        
        localStorage.setItem("post-xiang",JSON.stringify(item))
        
        navigate(`/postxiang?id=${id}`)
    }

    const mapStatus = (status) => {
        switch (status) {
            case 0:
                return '已投递';
            case 1:
                return '被查看';
            case 2:
                return '待沟通';
            case 3:
                return '待面试';
            case 4:
                return '已面试';
            case 5:
                    return '试工中';
            case 6:
                    return '已入职';  
            case 7:
                        return '已淘汰';   
            default:
                return '未知状态';
        }
    };

    // 代沟通的数量
    const dais = [...list].filter(item => item.status ===2).length
    // 被查看的数量
    const looks = [...list].filter(item => item.status === 1).length
    // 已投递的数量
    const to = [...list].filter(item => item.status === 0).length
    const [view, setview] = useState("全部")

    const newlist = () => {
        if (view === "全部") {
            return [...list]
        } else if (view === "已投递") {
            return [...list].filter(item => item.status === 0)
        } else if (view === "被查看") {
            return [...list].filter(item => item.status === 1)
        } else if (view === "待沟通") {
            return [...list].filter(item => item.status === 2)
        }
    }

    const [hasMore, setHasMore] = useState(true)
    const [len, setlen] = useState(4)
    async function loadMore() {

        setTimeout(() => {
            setlen(len + 2)
            setHasMore(len < list.length)
        })
    }
    
    useEffect(() => {
        getlist()
    }, [])

    return (
        <div className="box-post">
            <div className="background1"
            >

                <div>
                    <img src={img3} alt="" srcset="" className="img3" />
                </div>
                <NavBar onBack={back}>投递箱</NavBar>
                <ul className="post1">
                    <li className={view === "全部" ? "active" : ""}
                        onClick={() => {
                            setview("全部")
                        }}
                    ><h4>全部（{list.length}）</h4>
                    </li>
                    <li
                        className={view === "已投递" ? "active" : ""}
                        onClick={() => {
                            setview("已投递")
                        }}
                    ><h4>已投递（{to}）</h4></li>
                    <li className={view === "被查看" ? "active" : ""}
                        onClick={() => {
                            setview("被查看")
                        }}><h4>被查看（{looks}）</h4></li>
                    <li
                        className={view === "待沟通" ? "active" : ""}
                        onClick={() => {
                            setview("待沟通")
                        }}
                    ><h4>待沟通（{dais}）</h4></li>
                </ul>
            </div>
            <div className="main">
                {
                    newlist().map((item) => {
                        return (

                            <Card onClick={() => posts(item._id,item)}
                                key={item._id}
                                style={{ borderRadius: '16px', marginTop: 6, height: 170, lineHeight: 3 }}
                                className="card-shadow"
                            >
                                <p className="career">
                                    <span><h3>{item.careerName}</h3></span>
                                    <span style={{ color: "red" }}><h3>{item.salary}</h3></span>
                                </p>
                                <p>
                                    <span >{item.typeId.companyName}</span>
                                    <span style={{ marginLeft: 10 }}>{item.typeId.financing}</span>
                                    <span style={{ marginLeft: 10 }}>{item.typeId.companyCate}</span>
                                    <span style={{ marginLeft: 10 }}>{item.typeId.companyNum}</span>
                                </p>
                                <p className="career">
                                    <span>
                                        {moment(item.time).format('YYYY-MM-DD HH:mm:ss')}
                                    </span>
                                    <span>
                                        <Button color='primary' fill='outline' shape='rounded'>
                                            {mapStatus(item.status)}
                                        </Button>
                                    </span>
                                </p>

                            </Card>

                        )
                    })
                }

                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                    <InfiniteScrollContent hasMore={hasMore} />
                </InfiniteScroll>
            </div>
        </div>
    )
}

export default Postbox
